<template>
  <div class="navbar">
    <hamburger class="hamburger-container" @toggleClick="toggleSideBar"/>
    <div style="position: absolute;top:10px;right: 0">
      <el-dropdown>
        <span>
          <i class="element-icons el-icon-s-tools"
             style="font-size: 20px;color:var(--el-menu-text-color);text-decoration: underline;cursor:pointer;"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="closeAnnouncer">关闭播报</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Hamburger from '@/components/Hamburger.vue'
export default {
  name:'Header',
  data() {
    return {}
  },
  components: {
    Hamburger
  },
  methods: {
    // 关闭播报
    closeAnnouncer() {
      localStorage.removeItem("speechText")
      localStorage.removeItem("speechStartTime")
    },
    toggleSideBar() {
      this.$store.commit("doCollapse");
    },
    loginOut(){
      this.$store
              .dispatch("utils/closeWS")
              .then((res) => {
              });
      this.$router.push("/login")
      localStorage.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

}
</style>
